<script setup>
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue'
import { EffectCoverflow, Navigation } from 'swiper/modules'

// Import Swiper styles
import 'swiper/css'
import 'swiper/css/effect-coverflow'
import 'swiper/css/navigation'
</script>

<template>
  <div class="root">
    <!-- banner -->
    <div class="banner">
      <pre>
      <span style="font-size: 80px">智</span>创美好生活
          <span style="font-size: 80px">信</span>立卓越品质
      </pre>
    </div>
    <div class="company_intro">
      <div class="title">公司简介</div>
      <div class="content">
        <img src="/company.webp" alt="" />
        <p>
          成都智信耐材科技有限公司于2016年03月10日成立,位于中国西南中心城市成都市，公司专注于特种耐磨、耐高温材料的研发、生产与推广运用，现有各类专业研发、技术人员100余人，拥有耐磨、耐高温材料设计、发明等多项自主知识产权，公司以雄厚的研发实力和多年实践运用的积淀达成行业领先，竭诚为客户提供特种耐磨、耐高温材料整体解决方案。
        </p>
        <p>
          公司目前主要产品及材料有耐磨钢板、耐磨斗齿、耐磨链条、耐磨锤头、耐磨长寿皮带托辊、高性能耐磨焊条、焊丝、耐高温锭模、耐热风帽、耐高温耐磨的各类零配件等，并提供特种修复服务。公司产品已成功运用于矿山、水泥、冶金、工程机械、建筑、陶瓷、石油、化工等行业，与各大工业企业均有成功项目合作，并针对客户具体需要进行订制配套、整体解决。产品品质远超行业标准与国家标准，目前耐磨产品的使用寿命达到业内同类产品的2倍以上，耐高温、抗氧化材料的研发成功和使用解决了冶炼行业辅材的大量消耗问题，大幅度降低了各方面综合使用成本，满足了客户急需，并为各合作方带来了可观的经济效益。
        </p>
      </div>
    </div>
    <div class="patent">
      <div class="title">专利证书</div>
      <div class="content">
        <swiper
          class="swiper"
          loop="true"
          :modules="[EffectCoverflow, Navigation]"
          :effect="'coverflow'"
          :coverflowEffect="{
            rotate: 10,
            depth: 200,
            modifier: 1,
            slideShadows: true,
          }"
          :navigation="true"
          :pagination="{ clickable: true }"
          :slides-per-view="5"
          :space-between="20"
        >
          <swiper-slide v-for="item in 10" :key="item" class="swiper-slide">
            <img
              :src="'/patents/' + item + '.jpg'"
              alt="专利证书"
              loading="lazy"
            />
          </swiper-slide>
        </swiper>
        <p>我们的技术已经减少碳排放<span>xx</span>吨</p>
      </div>
    </div>
    <div class="world_map"></div>
  </div>
</template>

<style scoped lang="less">
.banner {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #acd7f9;
  font-size: 50px;
  height: 600px;
  background-image: url('@/assets/images/banner/index.jpg');
  background-size: cover;
  background-position: center;
  pre {
    position: absolute;
    top: 100px;
    left: 100px;
    font-weight: 700;
    text-shadow: 1px -1px #fff, -1px 1px #999, -2px 2px #808080;
  }
}
.company_intro {
  padding: 50px 0;
  .content {
    padding: 35px 100px;
    font-size: 18px;
    img {
      float: right;
      margin-left: 20px;
      margin-top: 20px;
      width: 600px;
    }
    p {
      margin: 10px 0;
      color: #666;
      text-indent: 2em;
      line-height: 1.5;
    }
  }
}
.patent {
  padding: 50px 0;
  color: #fff;
  background-color: #000;
  .content {
    // margin-top: 50px;
    text-align: center;
    .swiper {
      padding: 50px 0;
      .swiper-slide {
        width: 200px;
        height: 200px;
        -webkit-box-reflect: below 10px
          linear-gradient(transparent, transparent, #0005);
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    p {
      font-size: 24px;
      span {
        font-size: 60px;
      }
    }
  }
}
</style>
